<!--
 * @Description:
 * @Author: 张效玮2 yythis@163.com
 * @Date: 2025-08-11 10:05:29
 * @LastEditors: 张效玮2
 * @LastEditTime: 2025-08-14 20:36:25
-->
<script lang="ts" setup>
import { useStoreTypeManagement } from "./composables/useStoreTypeManagement"

// 使用业务逻辑
const {
  loading,
  searchKeyword,

  filteredStoreTypes,
  showCreateDialog,
  currentEditStoreType,
  headerButtons,
  handleCreateStoreType,

  handleDeleteStoreType,
  openEditDialog,
  closeDialog
} = useStoreTypeManagement()
</script>

<template>
  <div class="app-container">
    <div class="page-content">
      <!-- 页面头部 -->
      <PageHeader
        title="商家店铺类型维护"
        subtitle="管理所有支持的行业类型，为账号人设提供分类基础"
        :buttons="headerButtons"
      />

      <!-- 搜索区域 -->
      <div class="search-section">
        <div class="search-box">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索店铺类型..."
            clearable
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </div>
      </div>

      <!-- 店铺类型卡片网格 -->
      <div class="store-types-grid" v-loading="loading">
        <StoreTypeCard
          v-for="storeType in filteredStoreTypes"
          :key="storeType.id"
          :store-type="storeType"
          @edit="openEditDialog"
          @delete="handleDeleteStoreType"
        />

        <!-- 空状态 -->
        <div v-if="!loading && filteredStoreTypes.length === 0" class="empty-state">
          <el-empty
            description="暂无店铺类型"
            :image-size="100"
          />
        </div>
      </div>

      <!-- 新增/编辑弹窗 -->
      <StoreTypeDialog
        v-model="showCreateDialog"
        :store-type="currentEditStoreType"
        @confirm="handleCreateStoreType"
        @close="closeDialog"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "./styles/index.scss";
</style>
